<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>Coordinate Conversion Functional Test</title>
		<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
		<link rel="stylesheet" type="text/css" href="../css/style.css">
		<link rel="stylesheet" type="text/css" href="../../../jimu.js/css/jimu.css">
		<style>
		  html, body, #mapDiv {
		    padding: 0;
		    margin: 0;
		    height: 85%;
		  }
		</style>		
		<script type="text/javascript">
			var dojoConfig = {
				packages: [{
					    name: 'tests',
					    location: 'http://localhost/CoordinateConversion/widgets/CoordinateConversion/tests'
					}, {
						name: 'jimu',
						location: 'http://localhost/CoordinateConversion/jimu.js'
					}, {
						name: 'cc',
						location: 'http://localhost/CoordinateConversion/widgets/CoordinateConversion'
					}
				]				
			};
		</script>		
		<script src="https://js.arcgis.com/3.21/"></script>
		<script type="text/javascript">
			require([
				'esri/map', 
				'tests/coordinate-conversion-widget',
				'dojo/parser',				
				'dojo/dom',
				'dojo/dom-construct',
				'dojo/domReady!'
				], function (
					Map, 
					CoordinateConversionWidget, 
					parser,
					dom, 
					domConstruct				
					) {
					parser.parse().then(function(instances) {
						var map = new Map('mapDiv', {
							basemap: 'topo',
							center: [-122.45, 37.75],
							zoom: 13
						});
						map.on("load", loadCoordConvWidget);

			            var ccConfig = {
			                coordinateconversion: {
			                    zoomScale: 50000,
			                    initialCoords: ["DDM", "DMS", "MGRS", "UTM"],
			                    geometryService: {
			                      url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer"
			                    }
			                }
			            }						

						function loadCoordConvWidget(evt) {
							var coordConv = new CoordinateConversionWidget({
								config: ccConfig,
								folderUrl: "http://localhost/CoordinateConversion/widgets/CoordinateConversion/",
								map: map
							}, dom.byId('ccWidget'));
							coordConv.startup();
						}
					});
				});
		</script>
	</head>
	<body class='claro'>
		<div id='ccWidget' style="width:100%; height:50%"></div>
		<div>
		    <div class='inputcontainer' data-dojo-attach-point='inputcoordcontainer'>
		        <span class='jimu-widget-subtitle'>Input</span>
		    </div>
		    <div class='outputcontainer' data-dojo-attach-point='outputtablecontainer'>
		        <span class='jimu-widget-subtitle'>Output</span>
		    </div>
		</div>		
		<div id='mapDiv'></div>
	</body>
</html>